﻿@model FieldControlViewModel
@{
	string ctlID = Model.Prefix + Model.FieldName;
	string selectProvince = string.Empty;
	string selectCity = string.Empty;
	string selectArea = string.Empty;
	string defaultValue = Model.Settings[0];
	var arrValue = defaultValue.Split(new char[] { ',' });
	selectProvince = arrValue[0];
	selectCity = arrValue[1];
	selectArea = arrValue[2];
	string dataVal = string.Empty;
	string dataValMsg = string.Empty;
	if (Model.EnableNull)
	{
		dataVal += " data-val-required=\"不能为空\" ";
	}
	if (!string.IsNullOrEmpty(dataVal))
	{
		dataVal += " data-val=\"true\" ";
		dataValMsg = " data-valmsg-for=\"" + Model.Prefix + Model.FieldName + "\" data-valmsg-replace=\"true\"";
	}
}
<span class="select-box radius">
	<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
		<select lay-ignore class="select" onchange="SelectProvince('@{@ctlID}')" id="@{@ctlID}Province" name="@{@ctlID}Province"></select>
	</div>
	<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
		<select lay-ignore class="select" onchange="SelectCity('@{@ctlID}')" id="@{@ctlID}City" name="@{@ctlID}City"></select>
	</div>
	<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
		<select lay-ignore class="select" id="@{@ctlID}Area" name="@{@ctlID}Area"></select>
	</div>
</span>
<input type="text" class="layui-input" style="width:80%;display: inline;" name="@{@ctlID}Address" id="@{@ctlID}Address" />
<button class="layui-btn layui-btn-sm layuiadmin-btn-list" type="button" onclick="@{@ctlID}AddItem()">添加</button>
<table class="layui-table">
	<thead>
		<tr>
			<th>已选项</th>
			<th style="width:70px;">操作</th>
		</tr>
	</thead>
	<tbody id="tbody@{@ctlID}">
	</tbody>
</table>
<span class="layui-bg-green" style="display:inline-block;">@Model.Description</span>
<span style="color:red;" @Html.Raw(dataValMsg)></span>
<input type="hidden" name="@{@ctlID}" id="@{@ctlID}" value="@Model.FieldValue" @Html.Raw(dataVal) />
<script type="text/javascript">
	function @{@ctlID}ShowRegionSelect() {
		var selectValue = jQuery("#@{@ctlID}").val();
		var arrValue = selectValue.split(",");
		var html = "";
		for (i = 0; i < arrValue.length; i++) {
			if (arrValue[i] != null && arrValue[i] != "") {
				html += "<tr>";
				html += "<td>" + arrValue[i] +"</td>";
				html += "<td><button class=\"layui-btn layui-btn-xs layui-btn-danger\" type=\"button\" onclick=\"@{@ctlID}DelItem('" + arrValue[i] + "')\"><i class=\"layui-icon layui-icon-delete\"></i>删除</button></td>";
				html += "</tr>";
			}
		}
		var tbodyID = "tbody@{@ctlID}";
		$("#" + tbodyID).empty();
		$("#" + tbodyID).append(html);
	}
	function @{@ctlID}AddItem() {
		var Province = $("#@{@ctlID}Province").val();
		var City = $("#@{@ctlID}City").val();
		var Area = $("#@{@ctlID}Area").val();
		var Address = $("#@{@ctlID}Address").val();
		if (Province == null || Province == "") {
			layer.msg("省不能为空");
			return;
		}
		if (City != null && City != "") {
			Province += "-" + City;
		}
		if (Area != null && Area != "") {
			Province += "-" + Area;
		}
		if (Address != null && Address != "") {
			Province += "-" + Address;
		}
		@{@ctlID}DelItem(Province);
		var selectValue = jQuery("#@{@ctlID}").val();
		if (selectValue != null && selectValue != "") {
			selectValue = selectValue + "," + Province;
		}
		else {
			selectValue = Province;
		}
		jQuery("#@{@ctlID}").val(selectValue);
		@{@ctlID}ShowRegionSelect();
	}
	function @{@ctlID}DelItem(item) {
		var selectValue = jQuery("#@{@ctlID}").val();
		var arrValue = selectValue.split(",");
		var listItem = "";
		for (i = 0; i < arrValue.length; i++) {
			if (arrValue[i] != null && arrValue[i] != "") {
				if (arrValue[i] != item) {
					listItem += arrValue[i] + ",";
				}
			}
		}
		listItem = listItem.TrimEnd(',');
		jQuery("#@{@ctlID}").val(listItem);
		@{@ctlID}ShowRegionSelect();
	}
	jQuery(function () {
		InitRegion("中华人民共和国", "@selectProvince", "@selectCity", "@selectArea", "@ctlID");
		@{@ctlID}ShowRegionSelect();
	});
</script>